<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>


<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: 'Spring Bean Initializing Timeline'
        },
        yAxis: [
            {
                data: ["dummyService6","dummyService5","dummyService4","dataSource","dummyService3","userMapper","goodsMapper","countryMapper","cityMapper","actorMapper","sqlSessionFactory","dummyService2","dummyService1","org.mybatis.spring.mapper.MapperScannerConfigurer#0"],
                type: 'category'
            }
        ],
        xAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value} ms'
                }
            }
        ],
        legend: {data: ['Create', 'Instantiate', 'Populate'], right: '0%'},
        grid: {left: '3%', bottom: '3%', right: '4%', containLabel: true},
        series: [
            {
                stack: 'Summary',
                silent: true,
                data: [384.1,382.84,381.41,183.09,155.29,170.51,390.8,390.46,390.11,389.82,176.16,107.53,96.68,39.08],
                name: 'Placeholder1',
                emphasis: {
                    itemStyle: {borderColor: 'transparent', color: 'transparent'}
                },
                itemStyle: {borderColor: 'transparent', color: 'transparent'},
                type: 'bar'
            },
            {
                stack: 'Summary',
                data: [0.99,1.23,2.67,12.1,14.22,206.81,0.18,0.32,0.2,0.26,196.45,62.9,284.53,26.76],
                name: 'Create',
                emphasis: {focus: 'series'},
                type: 'bar'
            },
            {
                stack: 'Detail',
                silent: true,
                data: [384.11,382.85,381.42,183.11,155.3,154.38,153.84,153.3,152.67,148.75,114.17,107.55,96.7,39.09],
                name: 'Placeholder2',
                emphasis: {
                    itemStyle: {borderColor: 'transparent', color: 'transparent'}
                },
                itemStyle: {borderColor: 'transparent', color: 'transparent'},
                type: 'bar'
            },
            {
                stack: 'Detail',
                data: [0.06,0.08,0.12,8.41,0.17,0.15,0.5,0.51,0.6,3.89,34.5,0.92,0.92,0.13],
                name: 'Instantiate',
                emphasis: {focus: 'series'},
                type: 'bar'
            },
            {
                stack: 'Detail',
                silent: true,
                data: [0.02,0.14,0.13,0.15,2.05,16.15,236.51,236.78,236.89,237.24,28.16,3.06,8.1,0.01],
                name: 'Placeholder3',
                emphasis: {
                    itemStyle: {borderColor: 'transparent', color: 'transparent'}
                },
                itemStyle: {borderColor: 'transparent', color: 'transparent'},
                type: 'bar'
            },
            {
                stack: 'Detail',
                data: [0.89,0.99,2.4,3.5,11.95,206.61,0.12,0.18,0.13,0.18,21.67,58.82,275.47,26.56],
                name: 'Populate',
                emphasis: {focus: 'series'},
                type: 'bar'
            }
        ],
        tooltip: {
            axisPointer: {type: 'shadow'},
            trigger: 'axis',
            formatter: function (params) {
                return (
                    params[1].name
                    + '<br/>' + params[1].seriesName + ' : ' + params[1].value + 'ms'
                    + '<br/>' + params[3].seriesName + ' : ' + params[3].value + 'ms'
                    + '<br/>' + params[5].seriesName + ' : ' + params[5].value + 'ms'
                );
            }
        }
    };


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>